<template>
   <div class="regs">
        <div class="regs_top">
            <div class="back" @click="back">返回</div>
        </div>
        <div class="reg_from">
          <div class="reg_form" id="reg_form">
              <input type="text" class="phone" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="11" @focus="view"  v-model.trim="phone" placeholder="请输入手机号"/>
              <div class="form_auth">
                <input type="text" class="auth_code" v-model.trim="verifyCode" maxlength="6" @focus="view"  placeholder="请输入验证码" ref="inputs"/>
                <input type="button" class="get_code" :disabled="disabled" :value="btntxt"  @click="sendcode">
              </div>
              <input type="password" class="reg_password" v-model.trim="password" placeholder="请设置密码(6位以上)" @focus="view"  maxlength="12"/>
              <input type="text" class="reg_code" v-model.trim="inviteCode" placeholder="请输入邀请码" @focus="view" maxlength="6"/>
              <input type="button" class="reg_button" @click="enroll" value="立即注册"/>
          </div>
      </div>
   </div>     
</template>
<script>
export default {
  name: 'Reg',
  data () {
    return {
      disabled:false,
      time:0,
      btntxt:"获取验证码",
      verifyCode:'',
      phone:'',
      password:'',
      inviteCode:'',
    }
  },
  created(){
      document.title="注册";
      if(this.$route.query.spread_code){
         this.inviteCode=this.$route.query.spread_code;
      }else{
          this.inviteCode="";
      }
    
  },    
  methods:{
        back(){
           this.$router.go(-1);
        },
        sendcode(){
            var reg=11 && /^1[3456789]\d{9}$/;
            if(this.phone==''){
                Toast("请输入手机号码");
            }else if(!reg.test(this.phone)){
                Toast("手机格式不正确");
            }else{
              this.time=60;
              this.disabled=true;
              this.timer();
              this.$axios.post('/v1/common/sendCode',{
                   mobile: this.phone,
                   type:1,
            }).then(res => {
                  var result=res.data;
                  if(result.code==200){
                    Toast('验证码发送成功，请在手机端查收')
                    this.$refs.inputs.focus();
                  }else{
                      Toast(result.msg);
                  }
                }, res => {
                    console.log("error");
                });
            }
          },
          timer() {
            if (this.time > 0) {
              this.time--;
              this.btntxt=this.time+"s后重新获取";
              setTimeout(this.timer, 1000);
            } else{
              this.time=0;
              this.btntxt="获取验证码";
              this.disabled=false;
            }
          },
          enroll(){
              var reg=11 && /^1[3456789]\d{9}$/;
              if(this.phone==''){
                  Toast("请输入手机号码");
              }else if(!reg.test(this.phone)){
                  Toast("手机格式不正确");
              }else if(this.verifyCode==""){
                  Toast("请输入验证码");
              }else if(this.password==""){
                  Toast("请输入密码");
              }else if(this.password.length<6){
                  Toast("密码必须6位以上");
              }else if(this.inviteCode==""){
                  Toast("请输入邀请码");
              }else{
                this.$axios.post('/v1/common/register', {
                      mobile: this.phone,
                      code:this.verifyCode,
                      password:this.password,
                      spread_code:this.inviteCode,
                }).then(res => {
                    var result=res.data;
                    if(result.code==200){
                        var token=result.data.token;
                        localStorage.setItem('token',token);
                        this.$router.push({path:'/redpocket?title=整点红包'});
                    }else{
                       Toast(result.msg);
                    }
                }, res => {
                      console.log("error");
                });              
              }
          },
          view(){
             let _this=this;
             setTimeout(function(){
                let pannel=document.getElementById("reg_form");
                pannel.scrollIntoView(true);
             },200)
          }
  },
}
</script>
<style scoped>
.regs_top{width:100%;height:836px;padding-top:36px;background:#FEEDD4 url("/static/img/regs.png") no-repeat center center;background-size:100% 100%;}
.back{background:#E1C4A0;width:120px;height:68px;border-radius:0 68px 68px 0;line-height:68px;text-align: center;font-size:28px;color: #FFF;}
.reg_from{padding-top:44px;background:#FEEDD4;padding-bottom:168px;}
.reg_from .reg_form{width:700px;margin:0 auto;}
.reg_from .reg_form input{width:100%;height:100px;border:none;border-radius:94px;text-indent:36px;margin-bottom:26px;font-size:32px;color: #9D7E61;}
.reg_form .form_auth{  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  justify-items: center;
  text-align: justify; }
.reg_form .auth_code{width:378px!important;}
.reg_form .get_code{width:280px!important;background:linear-gradient(270deg,rgba(81,85,91,1) 0%,rgba(29,27,43,1) 100%);
border-radius:47px;font-size:32px;color:#FFF;text-indent:0!important;cursor:pointer;outline:0px; -webkit-appearance:none;color: #FFF!important;}
.reg_form .reg_button{margin-top:14px;background:linear-gradient(90deg,rgba(81,85,91,1) 0%,rgba(29,27,43,1) 100%);
border-radius:47px;color:#1A0B33;font-size:36px;font-weight:500;cursor:pointer;outline:0px; -webkit-appearance:none;color: #FFF!important;}
</style>